<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>多个图表展示demo3</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no" />
		<link rel="stylesheet" href="public/neat.css" />
		<link rel="stylesheet" href="public/bootstrap.min.css" />
		<link rel="stylesheet" href="font/iconfont.css" />
		<link rel="stylesheet" href="css/demo.css" />
	</head>
	<body class="body3">
		<div class="con">
			<div class="row-fluid" id="row5" style="height:10%;">
				<div class="span2 single">
					<h4 class="h4 blue mg text-center">2017 10月</h4>
					<select  class="year-select">
						<option value="">2017</option>
						<option value="">2016</option>
						<option value="">2015</option>
						<option value="">2014</option>
					</select>
					<select  class="month-select">
						<option value="">1月</option>
						<option value="">2月</option>
						<option value="">3月</option>
						<option value="">4月</option>
						<option value="">5月</option>
						<option value="">6月</option>
						<option value="">7月</option>
						<option value="">8月</option>
						<option value="">9月</option>
						<option value="" selected="selected">10月</option>
						<option value="">11月</option>
						<option value="">12月</option>
					</select>
				</div>
				<div class="span2 single clearfix">
					<div class="icon-box"><i class="icon iconfont single-icon">&#xe637;</i></div>
					<div class="data-box">
						<p>4,719.54人次</p>
						<p>日均门诊流量</p>
					</div>
				</div>
				<div class="span2 single clearfix">
					<div class="icon-box"><i class="icon iconfont single-icon">&#xe621;</i></div>
					<div class="data-box">
						<p>147.62人次</p>
						<p>日均入院流量</p>
					</div>
				</div>
				<div class="span2 single clearfix">
					<div class="icon-box"><i class="icon iconfont single-icon">&#xe661;</i></div>
					<div class="data-box">
						<p>31.31%</p>
						<p>药占比</p>
					</div>
				</div>
				<div class="span2 single clearfix">
					<div class="icon-box"><i class="icon iconfont single-icon">&#xe64a;</i></div>
					<div class="data-box">
						<p>5,218.03元</p>
						<p>住院人均费用</p>
					</div>
				</div>
				<div class="span2 single">
					<div class="icon-box"><i class="icon iconfont single-icon">&#xe64a;</i></div>
					<div class="data-box">
						<p>192.57元</p>
						<p>门诊人均费用</p>
					</div>
				</div>
			</div>
			
			<div class="row-fluid" id="row6" style="height:40%;">
				<div class="span6 single" style="height:100%;">
					<h4 class="h4 blue mg10">全院收入情况分析</h4>
					<div class="left-area" style="width:60%;height:calc(100% - 40px);">
						<div id="chart1" style="width:100%;height:100%;"></div>
					</div>
					<div class="right-area" style="width:38%;height:calc(100% - 40px);">
						<div id="child1" style="width:100%;height:100%;"> <!--门急诊收入-->
							<div class="child-box" style="float:left;width:50%;height:50%;">
								<h6 class="h6 blue text-center">药占比</h6>
								<div id="chart2" style="width:100%;height:calc(100% - 20px);"></div>
							</div>
							<div class="child-box" style="float:left;width:50%;height:50%;">
								<h6 class="h6 blue text-center">材料占比</h6>
								<div id="chart3" style="width:100%;height:calc(100% - 20px);"></div>
							</div>
							<div class="child-box" style="float:left;width:50%;height:50%;">
								<h6 class="h6 blue text-center">医保收入占比</h6>
								<div id="chart4" style="width:100%;height:calc(100% - 20px);"></div>
							</div>
							<div class="child-box" style="float:left;width:50%;height:50%;">
								<h6 class="h6 blue text-center">医保完成份额</h6>
								<div id="chart5" style="width:100%;height:calc(100% - 20px);"></div>
							</div>
						</div>
						<div id="child2" style="width:100%;height:100%;visibility: hidden;"> <!--住院收入-->
							<div class="child-box" style="float:left;width:50%;height:50%;">
								<h6 class="h6 blue text-center">药占比</h6>
								<div id="chart6" style="width:100%;height:calc(100% - 20px);"></div>
							</div>
							<div class="child-box" style="float:left;width:50%;height:50%;">
								<h6 class="h6 blue text-center">材料占比</h6>
								<div id="chart7" style="width:100%;height:calc(100% - 20px);"></div>
							</div>
							<div class="child-box" style="float:left;width:50%;height:50%;">
								<h6 class="h6 blue text-center">医保收入占比</h6>
								<div id="chart8" style="width:100%;height:calc(100% - 20px);"></div>
							</div>
							<div class="child-box" style="float:left;width:50%;height:50%;">
								<h6 class="h6 blue text-center">医保完成份额</h6>
								<div id="chart9" style="width:100%;height:calc(100% - 20px);"></div>
							</div>
						</div>
					</div>
				</div>
				
				<div class="span6 single" style="height:100%;">
					<h4 class="h4 blue mg10">全院医保概览</h4>
					<div class="left-area" style="width:60%;height:calc(100% - 40px);">
						<div id="chart10" style="width:100%;height:100%;"></div>
					</div>
					<div class="right-area" style="width:38%;height:calc(100% - 40px);">
						<div id="child3" style="width:100%;height:100%;"> <!--住院城保-->
							<div class="child-box" style="float:left;width:50%;height:50%;">
								<h6 class="h6 blue text-center">医保金额</h6>
								<div id="chart11" style="width:100%;height:calc(100% - 20px);"></div>
							</div>
							<div class="child-box" style="float:left;width:50%;height:50%;">
								<h6 class="h6 blue text-center">医保人次</h6>
								<div id="chart12" style="width:100%;height:calc(100% - 20px);"></div>
							</div>
							<div class="child-box" style="float:left;width:50%;height:50%;">
								<h6 class="h6 blue text-center">结算均次</h6>
								<div id="chart13" style="width:100%;height:calc(100% - 20px);"></div>
							</div>
							<div class="child-box" style="float:left;width:50%;height:50%;">
								<h6 class="h6 blue text-center">结算药品均次</h6>
								<div id="chart14" style="width:100%;height:calc(100% - 20px);"></div>
							</div>
						</div>
						<div id="child4" style="width:100%;height:100%;visibility: hidden;"><!--门诊城保-->
							<div class="child-box" style="float:left;width:50%;height:50%;">
								<h6 class="h6 blue text-center">医保金额</h6>
								<div id="chart15" style="width:100%;height:calc(100% - 20px);"></div>
							</div>
							<div class="child-box" style="float:left;width:50%;height:50%;">
								<h6 class="h6 blue text-center">医保人次</h6>
								<div id="chart16" style="width:100%;height:calc(100% - 20px);"></div>
							</div>
							<div class="child-box" style="float:left;width:50%;height:50%;">
								<h6 class="h6 blue text-center">结算均次</h6>
								<div id="chart17" style="width:100%;height:calc(100% - 20px);"></div>
							</div>
							<div class="child-box" style="float:left;width:50%;height:50%;">
								<h6 class="h6 blue text-center">结算药品均次</h6>
								<div id="chart18" style="width:100%;height:calc(100% - 20px);"></div>
							</div>
						</div>
					</div>
				</div>
			</div>
			
			<div class="row-fluid" id="row7" style="height:46%;">
				<div class="span4 single" style="height:100%;">
					<h4 class="h4 blue mg10">门诊流量统计</h4>
					<div id="chart19" style="width:100%;height:calc(100% - 20px);"></div>
				</div>
				
				<div class="span4 single" style="height:100%;">
					<h4 class="h4 blue mg10">出入院流量统计</h4>
					<div id="chart20" style="width:100%;height:calc(100% - 20px);"></div>
				</div>
				
				<div class="span4 my-area single" style="height:100%;">
					<h4 class="h4 blue text-center" id="tableTitle">医技科室情况</h4>
					<table class="table t-head">
						<thead>
							<colgroup>
								<col width="33.3%" />
								<col width="33.3%" />
								<col width="33.3%" />
							</colgroup>
							<tr>
								<td>医技科室</td>
								<td>工作量</td>
								<td>收入</td>
							</tr>
						</thead>
					</table>
					<div class="t-body" id="tBody">
						<table class="table">
							<tbody>
								<colgroup>
									<col width="33.3%" />
									<col width="33.3%" />
									<col width="33.3%" />
								</colgroup>
								<tr>
									<td>检验科</td>
									<td>134,846</td>
									<td>11,847,030</td>
								</tr>
								<tr>
									<td>CT室</td>
									<td>7,058</td>
									<td>1,775,791</td>
								</tr>
								<tr>
									<td>普通放射科</td>
									<td>5,487</td>
									<td>431,720</td>
								</tr>
								<tr>
									<td>核磁共振室</td>
									<td>3,805</td>
									<td>1,565,260</td>
								</tr>
								<tr>
									<td>影像介入科</td>
									<td>10</td>
									<td>11,583</td>
								</tr>
								<tr>
									<td>检验科</td>
									<td>134,846</td>
									<td>11,847,030</td>
								</tr>
								<tr>
									<td>CT室</td>
									<td>7,058</td>
									<td>1,775,791</td>
								</tr>
								<tr>
									<td>普通放射科</td>
									<td>5,487</td>
									<td>431,720</td>
								</tr>
								<tr>
									<td>核磁共振室</td>
									<td>3,805</td>
									<td>1,565,260</td>
								</tr>
								<tr>
									<td>影像介入科</td>
									<td>10</td>
									<td>11,583</td>
								</tr>
							</tbody>
						</table>
					</div>
				</div>
			</div>			
		</div>
		
		<script src="public/jquery.js"></script>
		<script src="public/echarts.min.js"></script>
		<script src="js/demo3.js"></script>
	</body>
</html>
